var face_top=30;
var face_left=30;
var avatar_shape=new Array();   //0=>cara, 1=>ojos, 2=>nariz, 3=>boca, 4=>pelo
var avatar_color=new Array(); //0=>cara, 1=>ojos, 2=>nariz, 3=>boca, 4=>pelo

iris.screen(function (self) {	
    self.create=function() {
        self.tmpl("/screens/avatar.html");
        self.ui("avatar_seleccion", "/ui/avatar_seleccion.js");
    	self.ui("avatar_url", "/ui/avatar_url.js");

    };
    self.awake=function(){
    	//alert(saveAvatar());
    	var canvas=$('canvas').get(0);
    	avatar_color[0]="rgba(247, 139, 182, 1)";
    	avatar_color[1]="rgba(255, 255, 255, 1)";
    	$(".face").click(function(){
    		clearCanvas(canvas);
    		avatar_shape[0]=$(this).data("type");
    		//alert(avatar_array[0]);
    		draw(canvas);
    	});
    	$(".eyes").click(function(){
    		clearCanvas(canvas);
    		avatar_shape[1]=$(this).data("type");
    		//alert(avatar_array[0]);
    		draw(canvas);
    	});
    	$(".nose").click(function(){
    		clearCanvas(canvas);
    		avatar_shape[2]=$(this).data("type");
    		//alert(avatar_array[0]);
    		draw(canvas);
    	});
    	$(".mouth").click(function(){
    		clearCanvas(canvas);
    		avatar_shape[3]=$(this).data("type");
    		//alert(avatar_array[0]);
    		draw(canvas);
    	});
    	$("#submit_canvas_avatar").click(function(){
    		//alert(saveAvatar());
    		saveSessionAvatar(saveAvatar());
    		location.reload();
    	});
    	$("#fileUpload").change(function(e){
    		//loadImage('http://es.opensuse.org/images/archive/e/e6/20111207000047!Icon-distribuci%C3%B3n.png');
    		//alert(saveAvatar());
    		//loadImage(saveAvatar());
    		
    		var file = e.target.files[0];
        	imageType = /image.*/;

	        if (!file.type.match(imageType)){
	        	alert("Debes seleccionar una imagen valida");
	        }else{
		        var reader = new FileReader();
		        reader.onload = loadImage;
		        reader.readAsDataURL(file); 
		   	}   
		});
	}
}, iris.path.screen.avatar.js);

function draw(canvas){
	drawFace(canvas, avatar_shape[0], avatar_color[0]);
	drawNose(canvas, avatar_shape[2], avatar_color[0]);
	drawEyes(canvas, avatar_shape[1], avatar_color[1]);
	drawMouth(canvas, avatar_shape[3], avatar_color[3]);
}

function saveAvatar(){
	var canvas=$('canvas').get(0);
	return canvas.toDataURL("image/png");
}

function clearCanvas(){
	var ctx = canvas.getContext('2d');
	// Store the current transformation matrix
	ctx.save();
	// Use the identity matrix while clearing the canvas
	ctx.setTransform(1, 0, 0, 1, 0, 0);
	ctx.clearRect(0, 0, canvas.width, canvas.height);
	// Restore the transform
	ctx.restore();
}

function loadImage(e){
	var canvas=$('canvas').get(0);
	var ctx = canvas.getContext('2d');
  	// load image from data url
    var imageObj = new Image();
    imageObj.src = e.target.result;
    //imageObj.crossOrigin = '';
    imageObj.onload = function() {
    	var ratio=null;
    	if(imageObj.width>imageObj.height){
	    	ratio=imageObj.width/canvas.width;
	    }else{
	    	ratio=imageObj.height/canvas.height;
	    }
    	ctx.drawImage(this, 0, 0,imageObj.width/ratio, imageObj.height/ratio);
    };

	
}

function drawFace(canvas, type, color){
	var ctx = canvas.getContext('2d');
	ctx.fillStyle = color;
	if(type=="1"){
		ctx.fillRect (face_left, face_top, canvas.width-2*face_left, canvas.height-2*face_top); //left top ancho alto
	}else if(type=="2"){
		ctx.fillRect (face_left*2, face_top, canvas.width-4*face_left, canvas.height-2*face_top); //left top ancho alto
	}else if(type=="3"){
		//ctx.fillRect (face_left, face_top, canvas.width-2*face_left, canvas.height-2*face_top); //left top ancho alto
		ctx.beginPath();
		ctx.arc(canvas.width/2, canvas.height/2, canvas.height/3, 0, Math.PI*2, true); 
		ctx.closePath();
		ctx.fill();
	}else if(type=="4"){
		//ctx.fillRect (face_left, face_top, canvas.width-2*face_left, canvas.height-2*face_top); //left top ancho alto
		ctx.save();
		ctx.scale(0.75, 1);
		ctx.beginPath();
		ctx.arc(canvas.width/1.5, canvas.height/2, canvas.height/3, 20, Math.PI*2, true); 
		ctx.closePath();
		ctx.fill();
		ctx.restore();
	}
}

function drawEyes(canvas, type, color){
	var ctx = canvas.getContext('2d');
	ctx.fillStyle = color;
	if(type=="1"){
		//bordes
		ctx.fillStyle = "#000";
		ctx.fillRect (face_left*2, face_top*2, canvas.width-6*face_left, canvas.height-5*face_top); //left top ancho alto
		ctx.fillRect (face_left*4, face_top*2, canvas.width-6*face_left, canvas.height-5*face_top);
		//ojo
		ctx.fillStyle = color;
		ctx.fillRect (face_left*2+4, face_top*2+4, canvas.width-6*face_left-8, canvas.height-5*face_top-8); //left top ancho alto
		ctx.fillRect (face_left*4+4, face_top*2+4, canvas.width-6*face_left-8, canvas.height-5*face_top-8);
	}else if(type=="2"){
		//bordes
		ctx.fillStyle = "#000";
		ctx.fillRect (face_left*2, face_top*2+8, canvas.width-6*face_left, canvas.height-5*face_top); //left top ancho alto
		ctx.fillRect (face_left*4, face_top*2+8, canvas.width-6*face_left, canvas.height-5*face_top);
		//ojo
		ctx.fillStyle = color;
		ctx.fillRect (face_left*2+4, face_top*2+16, canvas.width-6*face_left-4, canvas.height-5*face_top-8); //left top ancho alto
		ctx.fillRect (face_left*4+4, face_top*2+16, canvas.width-6*face_left-4, canvas.height-5*face_top-8);
	}else if(type=="3"){
		ctx.fillStyle = "#000";
		//borde ojo der
		ctx.beginPath();
		ctx.arc(canvas.width/1.5, canvas.height/2, canvas.height/9, 0, Math.PI*2, true); 
		ctx.closePath();
		ctx.fill();
		//borde ojo izq
		ctx.beginPath();
		ctx.arc(canvas.width/2.75, canvas.height/2, canvas.height/9, 0, Math.PI*2, true); 
		ctx.closePath();
		ctx.fill();
		ctx.fillStyle = color;
		//borde ojo der
		ctx.beginPath();
		ctx.arc(canvas.width/1.5, canvas.height/2, canvas.height/11, 0, Math.PI*2, true); 
		ctx.closePath();
		ctx.fill();
		//borde ojo izq
		ctx.beginPath();
		ctx.arc(canvas.width/2.75, canvas.height/2, canvas.height/11, 0, Math.PI*2, true); 
		ctx.closePath();
		ctx.fill();
	}else if(type=="4"){
		ctx.fillStyle = "#000";
		ctx.save();
		ctx.scale(1, 0.75);
		ctx.beginPath();
		ctx.arc(canvas.width/1.5, canvas.height/1.5, canvas.height/9, 20, Math.PI*2, true); 
		ctx.closePath();
		ctx.fill();
		ctx.beginPath();
		ctx.arc(canvas.width/2.75, canvas.height/1.5, canvas.height/9, 20, Math.PI*2, true); 
		ctx.closePath();
		ctx.fill();
		ctx.restore();
		ctx.fillStyle = "#fff";
		//borde ojo der
		ctx.beginPath();
		ctx.arc(canvas.width/1.5, canvas.height/2.1, canvas.height/20, 0, Math.PI*2, true); 
		ctx.closePath();
		ctx.fill();
		//borde ojo izq
		ctx.beginPath();
		ctx.arc(canvas.width/2.60, canvas.height/1.9, canvas.height/20, 0, Math.PI*2, true); 
		ctx.closePath();
		ctx.fill();
	}
}

function drawNose(canvas, type, color){
	var ctx = canvas.getContext('2d');
	ctx.fillStyle = color;
	if(type=="1"){
		ctx.fillStyle = "#000";
		ctx.fillRect (face_left*3, face_top*2.5, canvas.width-6*face_left, canvas.height-5*face_top); //left top ancho alto
		ctx.fillStyle = color;
		ctx.fillRect (face_left*3, face_top*2.5, canvas.width-6*face_left-4, canvas.height-5*face_top-4); //left top ancho alto
	}else if(type=="2"){
		ctx.fillStyle = "#000";
		ctx.fillRect (face_left*3.3-5, face_top*4.2, 5, 5); //left top ancho alto
		ctx.fillRect (face_left*3.3+5, face_top*4.2, 5, 5); //left top ancho alto
	}
}

function drawMouth(canvas, type, color){
	var ctx = canvas.getContext('2d');
	ctx.fillStyle = color;
	if(type=="1"){
		ctx.save();
		ctx.scale(0.75, 1);
		ctx.stroke
		ctx.fillStyle = "#000";
		ctx.beginPath();
		ctx.arc(canvas.width/1.5, canvas.height/2.25, canvas.height/3, Math.PI*0.25, Math.PI*0.75, false); 
		ctx.fill();
		ctx.restore();
	}else if(type=="2"){
		//bordes
		ctx.fillStyle = "#000";
		ctx.fillRect (face_left*2+4, face_top*4.5, 50, 20); //left top ancho alto
		ctx.fillStyle = "red";
		ctx.fillRect (face_left*2+20, face_top*4.5+10, 30, 8);
	}else if(type=="3"){
		ctx.fillStyle = "#000";
		//borde ojo der
		ctx.save();
		ctx.scale(0.75, 1);
		ctx.beginPath();
		ctx.arc(canvas.width/1.5, canvas.height/1.35, canvas.height/15, Math.PI*0.25, Math.PI*1.35, false); 
		ctx.lineTo(canvas.width/1.3,canvas.height/1.5);
		ctx.closePath();
		ctx.fill();
		ctx.restore();
	}else if(type=="4"){
		ctx.save();
		ctx.scale(0.35, 1);
		ctx.stroke
		ctx.fillStyle = "#000";
		ctx.beginPath();
		ctx.arc(canvas.width/0.65-5, canvas.height*0.95+10, canvas.height/3, Math.PI*1.25, Math.PI*1.75, false); 
		ctx.fill();
		ctx.restore();
	}
}
